<template>
    <el-dialog
            :title="dialogInfo.title"
            width="72%"
            :visible.sync="show"
            style="padding:20px;"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
        >
            <el-form
                :model="divideModuleForm"
                label-width="90px"
                label-position="right"
                ref="divideModuleForm"
                style="margin-top:12px;"
                :rules="rule"
                inline
            >
                <el-row>
                    <el-col span="8">
                        <el-form-item
                            :label="dialogInfo.operate == 2 ? '课程组名：' : '模块名称：'"
                            prop="remark"
                            style="margin-left:12px"
                        >
                            <el-input
                                v-model="divideModuleForm.remark"
                                placeholder="请输入"
                                style="width:100%;"
                            ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col span="7" v-if="dialogInfo.operate == 2">
                        <el-radio
                            v-model="limitType"
                            style="margin-top:8px;"
                            label="0"
                            @change="radioChoose"
                            :disabled="!dialogInfo.canChangeLimitType"
                        >
                            <span></span>
                        </el-radio>
                        <el-form-item label="至少门数：" prop="minNum" style="margin-left:-50px">
                            <el-input-number
                                v-model="divideModuleForm.minNum"
                                @change="autoName()"
                                :min="0"
                                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                                :max="dialogInfo.num"
                                :disabled="limitType != '0'"
                                controls-position="right"
                                style="width:120px;"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                    <el-col span="9" v-if="dialogInfo.operate == 2">
                        <el-radio
                            v-model="limitType"
                            style="margin-top:8px;"
                            label="1"
                            @change="radioChoose"
                            :disabled="!dialogInfo.canChangeLimitType"
                        >
                            <span></span>
                        </el-radio>
                        <el-form-item label="学分限制：" prop="expression" style="margin-left:-50px;height:30px">
                            <el-select
                                v-model="divideModuleForm.expression"
                                style="width:95px;"
                                @change="autoName()"
                                :disabled="limitType != '1'"
                            >
                                <el-option
                                    v-for="item in options.expressions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="minCredits">
                            <el-input-number
                                v-model="divideModuleForm.minCredits"
                                :min="0"
                                :max="999"
                                @change="autoName()"
                                onkeypress="return(/[\d]/.test(String.fromCharCode(event.keyCode)))"
                                controls-position="right"
                                style="width:115px;"
                                :disabled="limitType != '1'"
                            ></el-input-number>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <el-row :gutter="4">
                <el-col class="secondary-text">
                    <i class="el-icon-info" style="margin-top:4px;"></i>
                    <span>
                        {{
                            `已选择${dialogInfo.num}${
                                dialogInfo.level == 1 ? '门课程' : '个模块'
                            }`
                        }}
                    </span>
                </el-col>
            </el-row>
            <el-table
                stripe
                width="100%"
                :data="dialogInfo.currentCourses"
                style="margin-top:12px;"
                :span-method="spanMethodForModule"
            >
                <el-table-column
                    label="模块"
                    align="center"
                    prop="modelName"
                    v-if="dialogInfo.level != 1"
                />
                <el-table-column label="课程代码" align="center" prop="courseCode" />
                <el-table-column label="课程名称" align="center" prop="name" />
                <el-table-column label="学分" align="center" prop="credits" />
                <el-table-column label="总学时" align="center" prop="period" />
                <el-table-column label="备注" align="center" prop="remarks" />
            </el-table>
            <span slot="footer">
                <div style="margin:12px">
                    <el-button @click="cancel">
                        {{ $t('message.cancel') }}
                    </el-button>
                    <el-button type="primary" @click="ok()">
                        {{ $t('message.confirm') }}
                    </el-button>
                </div>
            </span>
        </el-dialog>
</template>
<script>
import { addDivide } from "common/src/api/minor/minorCulturePlanManager";
export default {
    name: "DivideIntoGroup",
    props: {
        dialogInfo: {
            type: Object,
            default: {}
        },
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        const validate = (rule, value, callback) => {
            let newValue = parseInt(value * 1);
            if (rule.field == 'minNum' && this.limitType == '0' && (value * 1 <= 0 || newValue !== value)) {
                callback(new Error('请设置有效的门数'))
            }
            else if (rule.field == 'minCredits' && this.limitType == '1' && (!value || value <=0)) {
                callback(new Error('请设置有效的学分'))
            }
            else {
                callback();
            }
        }
        const validateChange = (rule, value, callback) => {
            let flag = this.limitType == '1' && value === ''
            if (!flag) callback()
            else callback(new Error('请选择'))
        }
        const verifyName = (rule, value, callback) => {
            if (value.trim() != '') callback()
            else
                callback(
                    new Error(`请输入${this.dialogInfo.operate == 1 ? '模块' : '课程组'}名称`)
                )
        }
        return {
            divideModuleForm: {
                remark: '', //模块名称
                type: '0', //分组时勾选的选项 0：至少门数；1:学分限制
                minNum: 0, //分组时至少门数值
                maxNum: this.dialogInfo.num,
                minCredits: '', //分组时学分限制数值
                expression: ''//分组时学分限制下拉选中值
            },
            options: {
                types: [],
                directions: [],
                expressions: [
                    { label: '大于', value: '0' },
                    { label: '大于等于', value: '1' },
                    { label: '等于', value: '2' },
                    { label: '小于等于', value: '3' },
                    { label: '小于', value: '4' }
                ]
            },
            limitType: this.dialogInfo.limitType,
            rule: {
                remark: [{ required: true, validator: verifyName, trigger: 'blur' }],
                minNum: [{ validator: validate, trigger: ['blur', 'change'] }],
                expression: [{ validator: validateChange, trigger: ['blur', 'change']}],
                minCredits: [{ validator: validate, trigger: ['blur', 'change']}]
            },
        };
    },
    computed: {
        selectNum() {
            return this.tableData.length;
        }
    },
    methods: {
        autoName() {
            let name, {level, num} = this.dialogInfo, {minNum, expression, minCredits} = this.divideModuleForm;
            switch (this.limitType) {
                case '0':
                    name = `${+level == 1 ? '课程' : '模块'}${num}选${minNum}`
                    this.divideModuleForm.remark = name;
                    break
                case '1':
                    if (!expression) return
                    name = `学分${
                        this.options.expressions.find(e => e.value == expression).label
                    }${minCredits}`
                    this.divideModuleForm.remark = name;
                    break
            }
        },
        radioChoose() {
            this.divideModuleForm.remark = ''
            this.$refs.divideModuleForm.resetFields();
            this.$refs.divideModuleForm.clearValidate()
        },
        cancel() {
            this.$emit("update:show", false);
        },
        spanMethodForModule() {

        },
        ok() {
            this.$refs['divideModuleForm'].validate(valid => {
                if (valid) {
                    let {operate, courseIdList, level, num, title} = this.dialogInfo;
                    //课程分模块
                    if (level == 1 && operate == 1) level = 3;
                    //课程分组
                    else if (level == 1 && operate == 2) level = 2;
                    //模块分组
                    else if (level == 2 && operate == 2) level = 1;
                    this.divideModuleForm.type = this.limitType;
                    let params = {
                        operate,
                        courseIdList,
                        level,
                        num,
                        title,
                        ...this.divideModuleForm
                    }
                    addDivide(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                message: '操作成功',
                                type: 'success'
                            })
                            this.cancel();
                            this.$emit("init");
                        }
                    })
                }
            })
        }
        // openDialog() {
        //     this.$refs.addGroupDialog.open();
        //     this.groupRulForm.groupName = "";
        //     this.groupRulForm.minCredits = "";
        //     this.groupRulForm.minNum = 1;
        //     this.groupRulForm.maxNum = this.tableData.length;
        // },
        // handleMinChange(e) {
        //     if (!e) {
        //         e = 1;
        //     }
        //     let { minNum, maxNum } = this.groupRulForm;
        //     if (maxNum == 0) {
        //         this.$nextTick(() => {
        //             this.groupRulForm.minNum = 0;
        //         });
        //     } else if (minNum > maxNum) {
        //         this.$nextTick(() => {
        //             this.groupRulForm.minNum = maxNum;
        //         });
        //     } else {
        //         this.$nextTick(() => {
        //             this.groupRulForm.minNum = e;
        //         });
        //     }
        // },
        // handleMaxChange(e) {
        //     if (!e) {
        //         e = this.selectNum;
        //     }
        //     let { minNum, maxNum } = this.groupRulForm;
        //     if (minNum > maxNum) {
        //         if (minNum == this.selectNum) {
        //             this.$nextTick(() => {
        //                 this.groupRulForm.maxNum = minNum;
        //             });
        //         } else {
        //             this.$nextTick(() => {
        //                 this.groupRulForm.maxNum = minNum;
        //             });
        //         }
        //     } else {
        //         this.$nextTick(() => {
        //             this.groupRulForm.maxNum = e;
        //         });
        //     }
        // },
        // confirm() {
        //     if (
        //         !this.groupRulForm.groupName &&
        //         this.groupRulForm.groupName !== 0
        //     ) {
        //         this.$message({
        //             type: "warning",
        //             message: "请填写模块名称后再提交!"
        //         });
        //         return;
        //     }
        //     if (this.groupRulForm.radio == 2) {
        //         let { minCredits, expression } = this.groupRulForm;
        //         if (!minCredits) {
        //             this.$message({
        //                 type: "warning",
        //                 message: "限制学分不能为空!"
        //             });
        //             return;
        //         } else if (expression == 1) {
        //             let count = 0;
        //             this.tableData.forEach(el => {
        //                 count += parseFloat(el.credits);
        //             });
        //             if (count < parseFloat(minCredits)) {
        //                 this.$message({
        //                     type: "warning",
        //                     message: "限制学分条件不满足!"
        //                 });
        //                 return;
        //             }
        //         } else {
        //             let flag = false;
        //             let tableData = JSON.parse(JSON.stringify(this.tableData));
        //             tableData.sort((a, b) => {
        //                 return parseFloat(a.credits) - parseFloat(b.credits);
        //             });
        //             tableData.forEach((el, i) => {
        //                 let count = parseFloat(el.credits);
        //                 if (count == minCredits) flag = true;
        //                 tableData.forEach((item, index) => {
        //                     if (index != i) {
        //                         if (
        //                             count + parseFloat(item.credits) ==
        //                             minCredits
        //                         ) {
        //                             flag = true;
        //                         } else {
        //                             count += parseFloat(item.credits);
        //                         }
        //                     }
        //                 });
        //             });
        //             if (!flag) {
        //                 this.$message({
        //                     type: "warning",
        //                     message: "限制学分条件不满足!"
        //                 });
        //                 return;
        //             }
        //         }
        //     }
        //     let courseIdList = this.tableData.map(el => {
        //         return el.id;
        //     });
        //     this.groupRulForm.type = parseInt(this.groupRulForm.radio) - 1;
        //     let params = Object.assign({}, this.groupRulForm, { courseIdList });
        //     addDivide(params).then(({ code, data }) => {
        //         if (code == 200) {
        //             this.$refs.addGroupDialog.close();
        //             this.$emit("init");
        //         }
        //     });
        // }
    }
};
</script>
<style scope>
.left {
    margin-right: 20px;
}
.middle{
    margin: 0 10px;
}
.groupDiv {
    font-size: 18px;
    margin: 10px 0 20px;
    font-family: 微软雅黑;
    font-weight: 500;
}
.groupTitle {
    margin: 0 0 10px;
    font-size: 14px;
    font-family: 微软雅黑;
    font-weight: 500;
}
.moudleDiv {
    width: 82px;
    padding: 0 0 0 25px;
    color: #4c5c70;
    font-size: 14px;
    font-weight: 500;
    font-family: Arial, sans-serif;
}

</style>

